import { urls } from '@/shared/constants';
import { Button, ButtonVariants, ScrollSup, Title } from '@/shared/ui';
import cn from 'classnames';
import Image from 'next/image';

import cs from '../AboutFeed.module.scss';
import { ReactComponent as HollowIcon } from '../images/hollow-icon.svg';
import InfoImage1 from '../images/image1.png';
import InfoImage2 from '../images/image2.png';
import InfoImage3 from '../images/image3.png';
import InfoImage4 from '../images/image4.png';
import {
  BannedProductsList,
  ColorCard,
  MythCard1,
  MythCard2,
  MythCard3,
  MythCard4,
  MythCard5,
  NumberedList1,
  NumberedList2,
  NumberedList3,
  Promo1,
  Promo2,
  Promo3,
  SectionType,
} from '../ui';

export const sections: SectionType[] = [
  {
    id: 'when',
    title: 'Когда начинать первый прикорм?',
    body: (
      <>
        <div className={cs.gap32}>
          <Title id="when" size="l" tag="h2">
            Когда начинать первый прикорм?
          </Title>
          <p className={cs.text}>
            Прежде всего, запомним главное —{' '}
            <strong className={cs.strong}>
              до года основной едой ребенка остается грудное молоко или адаптированная молочная смесь.
            </strong>{' '}
            А период первого прикорма — лишь переходный этап от теплого жидкого молочка к твердой разнообразной пище.
            Под прикормом, до этого срока, мы понимаем любой иной продукт кроме грудного молока или смеси.
          </p>
          <div className={cn(cs.image, cs.image1)}>
            <Image alt="eating" fill src={InfoImage1} />
          </div>
          <div className={cs.gap24}>
            <p className={cs.text}>
              Оптимальный возраст малыша для введения прикорма — между 4–6 месяцами жизни (по данным Союза педиатров
              России, а также ряда других рекомендаций развитых стран) или 6 месяцев (по рекомендациям ВОЗ). Это
              касается как детей, родившихся в срок, так и раньше срока, находящихся на искусственном вскармливании или
              на грудном.
            </p>
            <p className={cs.text}>
              Введение прикорма раньше 4 месяцев может быть также неблагоприятно для ребенка, как и&nbsp;намного позднее
              6 месяцев. В этом случае есть риски развития не только железодефицитной анемии, но еще и&nbsp;диабета
              1&nbsp;типа
              <ScrollSup number={1} />.
            </p>
          </div>
        </div>
        <Promo1 />
        <NumberedList1 />
        <ColorCard />
        <div className={cs.warning}>
          <HollowIcon />{' '}
          <span className={cs.text}>
            Появление первых зубов не указывает на то, что пора начинать прикорм. Также проявление только одного
            признака из перечисленных не должно быть причиной старта прикорма как можно раньше.
          </span>
        </div>
        <MythCard1 />
      </>
    ),
  },
  {
    id: 'where',
    title: 'С чего можно начать прикорм?',
    body: (
      <>
        <div className={cs.gap32}>
          <Title id="where" size="l" tag="h2">
            С чего можно начать прикорм?
          </Title>
          <div className={cn(cs.image, cs.image2)}>
            <Image alt="food" fill src={InfoImage2} />
          </div>
        </div>
        <MythCard2 />
        <NumberedList2 />
        <div className={cs.gap24}>
          <MythCard3 />
          <MythCard4 />
        </div>

        <Promo2 />
        <p className={cs.text}>
          Одну из самых популярных последовательностей продуктов вы&nbsp;сможете найти в мобильном приложении{' '}
          <Button data-testid="link-store" href={urls.storesDeeplink} link variant={ButtonVariants.Link}>
            «companyName — первый прикорм»
          </Button>
          , но по аналогии можно вводить и другие продукты, безопасные для малыша. Схема первого прикорма для грудничка
          доступна с 4 месяцев.
        </p>
      </>
    ),
  },
  {
    id: 'illness',
    title: 'Прикорм во время болезни',
    body: (
      <>
        <div className={cs.gap32}>
          <Title id="illness" size="l" tag="h2">
            Прикорм во время болезни
          </Title>
          <div className={cn(cs.image, cs.image3)}>
            <Image alt="picture" fill src={InfoImage3} />
          </div>
        </div>
        <NumberedList3 />
        <p className={cs.text}>
          Однако, даже во время болезни при условии, что у ребенка нет острого состояния, высокой температуры, вялости,
          можно предложить малышу то, что он ест с удовольствием.&nbsp; Но если все же ребенок отказывается,
          отворачивается от ложки, сжимает губы, значит он не голоден. Обильное питье во время болезни принесет куда
          больше пользы.
        </p>
        <MythCard5 />
      </>
    ),
  },
  {
    id: 'prohibitions',
    title: 'Что нельзя вводить ребенку в прикорм',
    body: (
      <>
        <div className={cs.gap32}>
          <Title id="prohibitions" size="l" tag="h2">
            Что нельзя вводить ребенку в прикорм
          </Title>
          <div className={cn(cs.image, cs.image4)}>
            <Image alt="picture" fill src={InfoImage4} />
          </div>
        </div>

        <BannedProductsList />
        <Promo3 />
      </>
    ),
  },
];
